import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';

import store from '../redux/store';
import { changeCity } from '../redux/action/CityAction';
import { useAutoHandleTabbar } from '../redux/action/TabbarAction';

import { findCities } from '@/api/MaiZuo';

export default function City() {
  const [list, setList] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    findCities().then((res) => {
      setList(res.cities);
    });
    return () => {};
  }, []);

  useAutoHandleTabbar();

  const handleClick = useCallback(
    (val) => {
      let { cityId, name: cityName } = val;
      store.dispatch(changeCity({ cityId, cityName }));
      navigate('/cinema');
    },
    [navigate]
  );

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li
            key={item.cityId}
            onClick={() => handleClick(item)}>
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}
